<script>
// 新增编辑页，弹窗会另抽出组件
import { defineComponent } from 'vue'
export default defineComponent({
  components: { EditImg, EditMiniprogram,EditLink },
  name: 'EditQrWelcome',
})
</script>
<script setup>
// import {qrGroupListData} from '@/data'
import EditImg from './welcome/editImg.vue'
import { weekList, isEmpty,deepClone } from '@/utils'
import { toRaw } from '@vue/reactivity'
import { ref, defineExpose, reactive } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import { CircleClose, Search, CirclePlus } from '@element-plus/icons-vue'
import ChooseDialogue from '@/components/app/chooseDialogue.vue'
import Draggable from 'vuedraggable'
import EditMiniprogram from './welcome/editMiniprogram.vue'
import EditLink from './welcome/editLink.vue'
const editImg = ref()
const editMiniprogram = ref()
const editLink = ref()
const interval=ref([{
  week_arr:[],
  startime:'',
  endtime:'',
  welcome_content:'',
  welcome_other_data:[]
}])
console.log(props.editForm)
if(props.editForm.dayparting_data){
  interval.value=props.editForm.dayparting_data
}else{
  props.editForm.dayparting_data=interval.value
}

// if(props.editForm.dayparting_status == 1){
//   if(props.editForm.dayparting_data.welcome_other_data.length == 0){
//     interval.value.welcome_other_data.push()
//   }
// }
const options=ref(
  [
    {
      value1:1,
      label:'星期一'
    },
    {
      value1:2,
      label:'星期二'
    },
    {
      value1:3,
      label:'星期三'
    },
    {
      value1:4,
      label:'星期四'
    },
    {
      value1:5,
      label:'星期五'
    },
    {
      value1:6,
      label:'星期六'
    },
    {
      value1:7,
      label:'星期日'
    }
  ]
)
const addInput= ()=>{
  if(interval.value.length <=9){
    var data = {
      week_arr:[],
      startime:'',
      endtime:'',
      welcome_content:'',
      welcome_other_data:[]
    }
    interval.value.push(data)
  }
}
const deleteData =(index,indexs)=>{
  interval.value[index].welcome_other_data.splice(indexs,1)
}
const deleteData1 =(index)=>{
  interval.value.splice(index,1)
}
const addClientNames =(val,index)=>{
  interval.value[index].welcome_content = interval.value[index].welcome_content + '[插入客户昵称]'
}
const isRefresh = ref(true)
const props = defineProps({
  editForm: {
    type: Object,
    default: {},
  },
})
const dragOptions = ref({
  animation: 120,
  scroll: true,
  group: 'sortlist',
  ghostClass: 'ghost-style',
})
const form = ref({})
form._value = toRaw(props.editForm)
const welcomeOtherData = ref(toRaw(props.editForm).welcomeOtherData)
const formRef = ref()
const rules = ref(
	{
  name: [
    { required: true, message: '请输入分组名称', trigger: 'blur' },
    { min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' },
	],
	}
)

const welcomeIndex = ref(0)

const dialogVisible = ref(false)
const openingDialogName = ref('')

const drag = ref()


const week = ref([])
const time = ref([])

const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}

const submit = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      console.log(form.value)
      var json = form.value
      json.week = week.value.join(',')
      json.time = time.value.join('~')
      console.log(json, '保存二维码编辑接口')
      return form.value
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const cancel = () => {
  dialogVisible.value = false
  emits('goBack')
}
const change = (e) => {}
const typeshow = ref(0)
const intervalindex=ref(0)
const listindexs=ref()
const listindexsdata=ref()
const eidtshowdata=ref(true)
const showDialog = (show,type,val,index,listindex,indexs) => {
  console.log(show,type,val,index,listindex)
  typeshow.value=show
  openingDialogName.value = type
  intervalindex.value=index
  if(listindex){
    listindexs.value=listindex
    listindexsdata.value=indexs
    eidtshowdata.value=false
  }else{
    eidtshowdata.value=true
  }
  // if (val!=undefined) {
  //   welcomeIndex.value = val
  //   var obj = toRaw(welcomeOtherData._value)[val]
  //   var dataObj = {}
  //   dataObj = deepClone(obj)
  // }
  switch(type){
    case '1':
    console.log(show,type,val,index)
        if (val !=undefined) {
          editImg.value.show(val)
        }else {editImg.value.show() }
      break;
    case '2':
         if (val!=undefined) {
          editLink.value.show(val)
        }else editLink.value.show() 
      break;
    case '3':
      if (val!=undefined) {
          editMiniprogram.value.show(val)
        }else editMiniprogram.value.show() 
      break;
  }
}
const deleteenclosure=(item,index,type)=>{
  if(type == 1){
    message.value.splice(index,1)
    form.value.welcome_other_data.splice(index,1)
  }else{
    subsection.value.splice(index,1)
    form.value.dayparting_data.splice(index,1)
  }
}
const message=ref([])
const subsection = ref([])
const getDialogueDataFa = (val) => {
  console.log(val)
  if(typeshow.value == 0){
    // message.value.push(val)
    if(form.value.welcome_other_data == undefined){
      message.value.push(val)
      form.value.welcome_other_data=message.value
    }else{
      if(eidtshowdata.value == false){
        form.value.welcome_other_data[intervalindex.value]=val
      }else{
        form.value.welcome_other_data.push(val)
      }
      
    }
    console.log(form.value.welcome_other_data)
   
  }else{
    console.log(interval.value[intervalindex.value])
    if(eidtshowdata.value == false){
      interval.value[intervalindex.value].welcome_other_data[listindexsdata.value]=val
      form.value.dayparting_data=interval.value
    }else{
      interval.value[intervalindex.value].welcome_other_data.push(val)
      form.value.dayparting_data=interval.value
    }
    
    
    
    // if(form.value.dayparting_data == undefined){
    //   subsection.value.push(val)
    //   form.value.dayparting_data=subsection.value
    // }else{
    //   form.value.dayparting_data.push(val)
    // }
    // subsection.value.push(val)
    
  }
  console.log(val)
  handleRefresh()
 
  // json.value.push(val)
  // console.log(val)
  // var json = toRaw(welcomeOtherData.value)
  // console.log(json)
  // json[welcomeIndex.value] = val
  // console.log(json)
  // console.log(json[welcomeIndex.value])
  // welcomeOtherData._value = json
  // console.log(json,welcomeOtherData.value)
  // handleRefresh()
}

const dele = (index) => {
  console.log(index)
  // var arr = toRaw(staff_data.value)
  // arr.splice(index, 1)
  // staff_data._value = arr
  
  handleRefresh()

}

const dataTypes = ref([])
const addListItem = (name) => {
  switch (name) {
    case 'staff_data':
      var arr = toRaw(staff_data.value)
      arr.push({
        selectStaffData: [],
        selectstaffids: [],
        time: [],
        week: [],
      })

      staff_data._value = arr
      break
  }
  handleRefresh()
}
let selectStaffupData = []
const handleSelectionChange = (val) => {
  selectStaffupData = val
}
const addClientName = (val) => {
  var json = form.value
  if(val == 1){
    if(json.welcome_content){
      json.welcome_content=json.welcome_content += '[插入客户昵称]'
    }else{
      json.welcome_content=' ' + '[插入客户昵称]'
    }
    
  }else{
    // var json = form.value
    if(json.dayparting_data){
      json.dayparting_data=json.dayparting_data += '[插入客户昵称]'
    }else{
      json.dayparting_data= '' + '[插入客户昵称]'
    }
    
  }
  // var json = form.value
  // json.welcomeContent += '客户昵称'
  form._value = json
  handleRefresh()
}
const emits = defineEmits(['goBack'])
defineExpose({
  submit
})
</script>
<template>
  <div v-if="isRefresh">
    <div class="app-edit app-gap-block-top">
      <div class="app-edit-title">
        <span class="app-edit-title-words">设置欢迎语</span>
      </div>
      <div class="app-edit-body">
        <div class="app-flex-left-top">
          <div>
            <el-tag
              style="width: 712px; margin-left: 56px;"
              class="app-el-tag app-gap-margin-top"
              type="warning"
            >
            <MyIcon class="app-icon app-warning-font" name="Bell" />
              因企业微信限制，若使用成员已在「企业微信后台」配置了欢迎语，这里的欢迎语将不会生效
            </el-tag>
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="140px"
            >
              <el-form-item label="设置欢迎语:">
                <div v-if="isRefresh">
                  <el-radio-group
                    @change="handleRefresh"
                    v-model="form.welcome_type"
                    class="app-radio"
                  >
                    <el-radio :label="1" size="large">渠道欢迎语</el-radio>
                    <el-radio :label="3" size="large">默认欢迎语</el-radio>
                    <el-radio :label="2" size="large">不发送欢迎语</el-radio>
                  </el-radio-group>
                  <div v-if="form.welcome_type == 3">
                    <div class="app-words-tip-weak">
                      将发送成员已设置的欢迎语，若所选成员未设置欢迎语，则不会发送欢迎语
                    </div>
                  </div>
                  <div v-if="form.welcome_type == 1">
                    <div class="mes-name">消息内容:</div>
                    <div class="app-warning-font app-pointer">
                      <span @click="addClientName(1)">[插入客户昵称]</span>
                    </div>
                    <div>
                      <el-input
                        :rows="15"
                        @input="handleRefresh"
                        class="app-max-width mes-field"
                        v-model="form.welcome_content"
                        maxlength="600"
                        placeholder="请输入"
                        show-word-limit
                        type="textarea"
                      />
                    </div>
                    <el-popover
                      popper-style="padding: 0px;min-width:0px"
                      placement="right"
                      :width="100"
                      trigger="click"
                    >
                      <div>
                        <div
                          class="app-hover-cell app-hover-cell-left"
                          @click="showDialog(0,'1',undefined)"
                        >
                        <MyIcon class="app-icon " name="Pic" />
                        <span class="app-gap-words-left-s">
                          图片
                        </span>
                        </div>
                        <div
                          class="app-hover-cell app-hover-cell-left"
                          @click="showDialog(0,'2',undefined)"
                        >
                          <MyIcon class="app-icon " name="LinkChain" />
                        <span class="app-gap-words-left-s">
                          链接
                        </span>
                        </div>
                        <div
                          class="app-hover-cell app-hover-cell-left"
                          @click="showDialog(0,'3',undefined)"
                        >
                          <MyIcon class="app-icon " name="MiniProgram" />
                        <span class="app-gap-words-left-s">
                          小程序
                        </span>
                        </div>
                      </div>
                      <template #reference>
                        <span class="app-5-words app-pointer app-flex-left">
                          <el-icon :size="17" class="app-pointer primary-font">
                            <CirclePlus />
                          </el-icon>
                          <span class="app-no-wrap app-pointer primary-font app-gap-words-left-s">
                            添加附件
                          </span>
                        </span>
                      </template>
                    </el-popover>
                    <!-- <Draggable
                      v-model="drag"
                      :list="welcomeOtherData"
                      :animation="100"
                      item-key="id"
                      class="list-group"
                      :forceFallback="true"
                      ghost-class="ghost"
                    >
                      <template #item="{ element,index }">
                        <div class="app-flex-2">
                          <div class="app-flex-left">
                            <span class="app-close-circle">
                              -
                            </span>
                            <span>
                              【<span v-if="element['type'] == '1'">图片</span>
                              <span v-else-if="element['type'] == '2'">链接</span>
                               <span v-else-if="element['type'] == '3'">小程序</span>】:
                            </span>
                            <span class="app-gap-words-left-s" v-if="element['type'] == '2'">{{ element['link_title'] }}</span>
                          </div>
                          <MyIcon @click="showDialog(element['type'],index)" class="app-pointer app-icon " name="Edit" />
                        </div>
                      </template>
                    </Draggable> -->
                    <div>
                      <div class="app-flex-2" v-for="(item,index) in form.welcome_other_data" :key="index">
                          <div class="app-flex-left">
                            <span class="app-close-circle" @click="deleteenclosure(item,index,1)">
                              -
                            </span>
                            <span>
                              【<span v-if="item.type == '1'">图片</span>
                              <span v-else-if="item.type == '2'">链接</span>
                               <span v-else-if="item.type == '3'">小程序</span>】:
                            </span>
                            <span class="app-gap-words-left-s" v-if="item.type == '1'">{{ item.title }}</span>
                            <span class="app-gap-words-left-s" v-if="item.type == '2'">{{ item.title }}</span>
                            <span class="app-gap-words-left-s" v-if="item.type == '3'">{{ item.title }}</span>
                          </div>
                          <MyIcon @click="showDialog(0,item.type + '',item,index,1)" class="app-pointer app-icon " name="Edit" />
                        </div>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="form.welcome_type == 1" class="app-input-phone">
            <div class="app-phone-scroll">
              <div class="app-flex-left-top">
                <div class="app-avatar">
                  <MyIcon class="app-white-font" name="Person" />
                </div>
                <div v-if="!isEmpty(form.welcome_content)">
                  <div class="app-phone-words">
                    {{ form.welcome_content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>



        <div class="">
          <div>
            <el-form
              ref="formRef"
              :model="form"
              :rules="rules"
              label-width="140px"
            >
              <el-form-item label="分时段欢迎语：">
                <div v-if="isRefresh">
                  <div v-if="isRefresh">
									<div>
										<el-switch
											:active-value="1"
											:inactive-value="0"
											@change="handleRefresh"
											size="small"
											v-model="form.dayparting_status"
										/>
										<span class="app-switch-right-text">已{{ form.dayparting_status === 1 ? '开启' : '关闭' }}</span>
									</div>
									<div v-if="form.dayparting_status == 1">
										<el-tag class="app-el-tag" style="width: 500px; height: 50px; line-height: 20px">
											分时段欢迎语 ：1、员工上下班不同时间段可设置不同欢迎语；
											<div style="margin-left: 88px; margin-top: 10px">2、分时段之外的时间将发送渠道欢迎语。</div>
										</el-tag>
                    <div v-for="(item,index) in interval" :key="index">
                      <div class="app-flex-left-top" >
											<div style="margin-top: 20px; color: #606266">时段{{index + 1}}:
												<div style="cursor:pointer;" @click="formRule.splice(index,1)"><el-icon><DeleteFilled /></el-icon></div>
											</div>
											<div class="welcomeStyle">
												<div class="mesname">
													<div style="display: inline-block;; margin-left: 30px;margin-top: 20px;">
														发送日期:
														<el-select v-model="item.week_arr" clearable multiple placeholder="请选择" style="width: 180px">
															<el-option
																v-for="item in options"
																:key="item.value1"
																:label="item.label"
																:value="item.value1"
															/>
														</el-select>
													</div>

													<div style="display: inline-block;; margin-left: 30px;margin-top: 20px;">
														<el-time-picker v-model="item.startime" placeholder="开始时间" style="width: 100px" /><span
															style="margin-left: 20px"
															>~</span
														>
														<el-time-picker
															v-model="item.endtime"
															arrow-control
															placeholder="结束时间"
															style="width: 100px; margin-left: 20px"
														/>
													</div>
                          <span style="color:#999;margin-left:20px" v-if="index!=0"><el-icon @click="deleteData1(index)" class="group-icon"><Delete /></el-icon
												></span>
												</div>
												<div class="app-warning-font app-pointer">
													<span @click="addClientNames(item.welcome_content,index)">[插入客户昵称]</span>
												</div>
												<div>
													<el-input
														:rows="20"
														@input="handleRefresh"
														class="app-max-width mes-field"
														v-model="item.welcome_content"
														maxlength="600"
														placeholder="请输入"
														show-word-limit
														type="textarea"
													/>
												</div>
												<!-- 时段欢迎语部分 -->
												<div v-for="(items, indexs) in item.welcome_other_data" :key="indexs">
													<!-- 图片部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 1"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【图片】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="showDialog(1,'1',items,index,2,indexs)"><Edit /></el-icon>
														</div>
													</div>
													<!-- 链接部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 2"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【链接】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="showDialog(1,'2',items,index,2,indexs)"><Edit /></el-icon>
														</div>
													</div>
													<!-- 小程序部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 3"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【小程序】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="showDialog(1,'3',items,index,2,indexs)"><Edit /></el-icon>
														</div>
													</div>
													<!-- 添加附件部分 -->
												</div>
												<el-popover
													popper-style="padding: 0px;min-width:0px"
													placement="right"
													:width="100"
													trigger="click"
												>
													<div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '1',undefined,index)">
															<MyIcon class="app-icon" name="Pic" />
															<span class="app-gap-words-left-s"> 图片 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '2',undefined,index)">
															<MyIcon class="app-icon" name="LinkChain" />
															<span class="app-gap-words-left-s"> 链接 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '3',undefined,index)">
															<MyIcon class="app-icon" name="MiniProgram" />
															<span class="app-gap-words-left-s"> 小程序 </span>
														</div>
													</div>
													<template #reference>
														<span class="app-5-words app-pointer app-flex-left">
															<el-icon :size="17" class="app-pointer primary-font">
																<CirclePlus />
															</el-icon>
															<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
														</span>
													</template>
												</el-popover>
												<Draggable
													v-model="drag"
													:list="welcomeOtherData"
													:animation="100"
													item-key="id"
													class="list-group"
													:forceFallback="true"
													ghost-class="ghost"
												>
													<template #item="{ element, index }">
														<div class="app-flex-2">
															<div class="app-flex-left">
																<span class="app-close-circle"> - </span>
																<span>
																	【<span v-if="element['type'] == '1'">图片</span>
																	<span v-else-if="element['type'] == '2'">链接</span>
																	<span v-else-if="element['type'] == '3'">小程序</span>】:
																</span>
																<span class="app-gap-words-left-s">{{ element['title'] }}</span>
															</div>
															<MyIcon
																@click="showDialog(0,element[type] + '',element,index,2)"
																class="app-pointer app-icon"
																name="Edit"
															/>
														</div>
													</template>
												</Draggable>
											</div>

											<div class="app-input-phone">
												<div class="app-phone-scroll">
													<div style="display: block">
														<div class="app-flex-left-top">
															<div class="app-avatar" v-if="item.welcome_content">
																<MyIcon class="app-white-font" name="Person" />
															</div>
															<div style="padding-left: 10px" :model="item.welcome_content">
																{{ item.welcome_content }}
															</div>
														</div>
														<div style="display: flex" v-for="(item, index) in dataTypes.slice(0, 9)" :key="index">
															<div class="app-avatar">
																<MyIcon class="app-white-font" name="Person" />
															</div>
															<div style="display: flex; justify-content: space-between" v-if="item.type == 1">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【图片2】: </span>
																	<span> {{ item.title }} </span>
																</div>
															</div>

															<div style="display: flex; justify-content: space-between" v-if="item.type == 2">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【链接】: </span>
																	<span> {{ item.title }} </span>
																</div>
															</div>

															<div style="display: flex; justify-content: space-between" v-if="item.type == 3">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【小程序】: </span>
																	<span> {{ item.title }} </span>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<!-- 遍历部分 -->
										<div class="app-flex-left-top" v-for="(item, index) in formRule" :key="index">
											<div style="margin-top: 20px; color: #606266">时段{{ index + 2 }}:</div>
											<div class="welcomeStyle">
												<div class="mesname">
													<div>
														发送日期:
														<el-select v-model="value1" clearable multiple placeholder="请选择" style="width: 180px">
															<el-option
																v-for="item in options"
																:key="item.value1"
																:label="item.label"
																:value="item.value1"
															/>
														</el-select>
													</div>

													<div style="display: flex; margin-left: 30px">
														<el-time-picker v-model="value2" placeholder="开始时间" style="width: 100px" /><span
															style="margin-left: 20px"
															>~</span
														>
														<el-time-picker
															v-model="value3"
															arrow-control
															placeholder="结束时间"
															style="width: 100px; margin-left: 20px"
														/>
													</div>
												</div>
												<div class="app-warning-font app-pointer">
													<span @click="addClientNames">[插入客户昵称]</span>
												</div>
												<div>
													<el-input
														:rows="20"
														@input="handleRefresh"
														class="app-max-width mes-field"
														v-model="form.welcomeContents"
														maxlength="600"
														placeholder="请输入"
														show-word-limit
														type="textarea"
													/>

													<el-row style="display: contents; color: #606266" @click="nextDown(index)">
														<el-icon><Delete /></el-icon>
													</el-row>
												</div>

												<!-- 时段欢迎语部分 -->
												<div v-for="(item, index) in dataTypes.slice(0, 9)" :key="index">
													<!-- 图片部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="item.type == 1"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【图片1】: </span>
															<span> {{ item.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="popDown('1')"><Edit /></el-icon>
														</div>
													</div>
													<!-- 链接部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="item.type == 2"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【链接】: </span>
															<span> {{ item.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="popDown('2')"><Edit /></el-icon>
														</div>
													</div>
													<!-- 小程序部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="item.type == 3"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【小程序】: </span>
															<span> {{ item.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<el-icon @click="popDown('3')"><Edit /></el-icon>
														</div>
													</div>
													<!-- 添加附件部分 -->
												</div>
												<el-popover
													popper-style="padding: 0px;min-width:0px"
													placement="right"
													:width="100"
													trigger="click"
												>
													<div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '2')">
															<MyIcon class="app-icon" name="Pic" />
															<span class="app-gap-words-left-s"> 图片 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('2', '2')">
															<MyIcon class="app-icon" name="LinkChain" />
															<span class="app-gap-words-left-s"> 链接 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('3', '2')">
															<MyIcon class="app-icon" name="MiniProgram" />
															<span class="app-gap-words-left-s"> 小程序 </span>
														</div>
													</div>
													<template #reference>
														<span class="app-5-words app-pointer app-flex-left">
															<el-icon :size="17" class="app-pointer primary-font">
																<CirclePlus />
															</el-icon>
															<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
														</span>
													</template>
												</el-popover>
												<Draggable
													v-model="drag"
													:list="welcomeOtherData"
													:animation="100"
													item-key="id"
													class="list-group"
													:forceFallback="true"
													ghost-class="ghost"
												>
													<template #item="{ element, index }">
														<div class="app-flex-2">
															<div class="app-flex-left">
																<span class="app-close-circle"> - </span>
																<span>
																	【<span v-if="element['type'] == '1'">图片1</span>
																	<span v-else-if="element['type'] == '2'">链接</span>
																	<span v-else-if="element['type'] == '3'">小程序</span>】:
																</span>
																<span class="app-gap-words-left-s">{{ element['title'] }}</span>
															</div>
															<MyIcon
                                @click="showDialog(0,element[type] + '',element,index,2)"
																class="app-pointer app-icon"
																name="Edit"
															/>
														</div>
													</template>
												</Draggable>
											</div>

											<div class="app-input-phone">
												<div class="app-phone-scroll">
													<div style="display: block">
														<div class="app-flex-left-top">
															<div class="app-avatar" v-if="form.welcomeContents">
																<MyIcon class="app-white-font" name="Person" />
															</div>
															<div style="padding-left: 10px" :model="form.welcomeContents">
																{{ form.welcomeContents }}
															</div>
														</div>
														<div style="display: flex" v-for="(item, index) in dataTypes.slice(0, 9)" :key="index">
															<div class="app-avatar">
																<MyIcon class="app-white-font" name="Person" />
															</div>
															<div style="display: flex; justify-content: space-between" v-if="item.type == 1">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【图片1】: </span>
																	<span> {{ item.title }} </span>
																</div>
															</div>

															<div style="display: flex; justify-content: space-between" v-if="item.type == 2">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【链接】: </span>
																	<span> {{ item.title }} </span>
																</div>
															</div>

															<div style="display: flex; justify-content: space-between" v-if="item.type == 3">
																<div style="display: flex; align-items: center">
																	<span style="margin-left: 5px"> 【小程序】: </span>
																	<span> {{ item.title }} </span>
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
                    </div>
										
									</div>
									<div @click="addInput">
										<span class="app-5-words app-pointer app-flex-left">
											<el-icon :size="17" class="app-pointer primary-font">
												<CirclePlus />
											</el-icon>
											<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加分段欢迎语 </span>
										</span>
									</div>
									<div class="bottomStyle">
										注意: 1、新建欢迎语最多可发送1条文字消息和9个附件<br />

										2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息<br />

										3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功<br />
									</div>
								</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <EditImg @getDialogueData="getDialogueDataFa($event,val)" ref="editImg"/>
    <EditLink @getDialogueData="getDialogueDataFa($event,val)" ref="editLink"/>
    <EditMiniprogram @getDialogueData="getDialogueDataFa($event,val)" ref="editMiniprogram"/>
  </div>
</template>


<style lang="scss">
@import url('../../../../../style/app-component.scss');
@import '../../../../../style/mixin.scss';
.app-phone-scroll {
  margin: 104px 20px 154px 26px;
  @include scrollBar;
  overflow: auto;
  height: calc(100% - 208px);
}

</style>
